import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LoginFormField extends StatefulWidget {
  //字段内的提示文字
  final String? hintText;

  //文本字段的控制器
  final TextEditingController? textEditingController;

  //文本字段的最大长度
  final int? maxLength;

  //文本字段的最小长度
  final int? minLength;

  //文本字段长度合理时的回调函数
  final Function? legitimateCallback;

  //文本字段长度不合理时的回调函数
  final Function? illegalCallback;
  final bool? isPwd;

  //图标
  Icon? prefixIcon;

  LoginFormField(
      {this.hintText,
      this.textEditingController,
      this.maxLength,
      this.minLength,
      this.legitimateCallback,
      this.illegalCallback,
        this.isPwd,
      this.prefixIcon});

  @override
  _LoginFormFieldState createState() => _LoginFormFieldState();
}

class _LoginFormFieldState extends State<LoginFormField> {
//文本字段下方的提示颜色
  Color? inputColor;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          controller: widget.textEditingController,
          //光标颜色属性, 绘制光标是使用的颜色
          cursorColor: Colors.blue,
          obscureText: widget.isPwd!,
          cursorWidth: 2.0,
          style: TextStyle(
            fontSize: ScreenUtil().setSp(40),
            //字母间距
            letterSpacing: 0.5,
            color: const Color(0xFF4A4A4A),
          ),
          //装饰属性, 在文本字段周围显示的装饰
          //输入装饰组件
          decoration: InputDecoration(
            contentPadding: EdgeInsets.only(left: 5.0),
            border: InputBorder.none,
            filled: true,
            fillColor: const Color(0xFFFFFFFF),
            // 是密集属性，输入子项是否是密集形式的一部分（即使用较少的垂直空间）。
            isDense: true,
            hintStyle: TextStyle(
              fontSize: 16.0,
              color: Color(0xFF9B9B9B),
            ),
            hintText: widget.hintText,
            //  prefixIcon: widget.prefixIcon,
            icon: widget.prefixIcon,
            //清除按钮
            suffix: IconButton(
                icon: Icon(
                  Icons.clear,
                  color: Colors.black45,
                ),
                onPressed: () {
                  widget.textEditingController!.clear();
                }),
          ),
          onChanged: (value) {
            //当欠文本字段中值的长度
            int fieldValue = value.trim().length;
            if (fieldValue == 0) {
              inputColor = Color(0xFFC5C5C5);
            } else if (fieldValue > widget.maxLength!) {
              inputColor = Color(0xFFFF3E44);
            } else {
              inputColor = Color(0xFF00CED2);
            }
            if (mounted) {
              setState(() {
                // 当前文本字段中值的长度符合给定范围时调用回调函数。
                if (fieldValue > widget.minLength! - 1 &&
                    fieldValue < widget.maxLength! + 1) {
                  widget.legitimateCallback!();
                } else {
                  widget.illegalCallback!();
                }
              });
            }
          },
        ),
        // TODO: 第3步：实现“状态指示条”。
        Container(
          margin: const EdgeInsets.only(left: 50),
          width: ScreenUtil().setWidth(700),
          height: 1.0,
          color: const Color(0xFF242406),
        ),
      ],
    );
  }
}
